import React, { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { ArrowLeft, MapPin, Calendar, Clock, Users, Star, Phone, MessageCircle, Heart, Share2, ChevronRight } from 'lucide-react';
import { useAppStore, CartItem } from '../stores/appStore';

const ActivityDetailPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { activities, currentUser, toggleFavorite, addToCart } = useAppStore();
  const [selectedTickets, setSelectedTickets] = useState(1);
  const [showContactModal, setShowContactModal] = useState(false);

  const activity = activities.find(a => a.id === id);

  if (!activity) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-primary-50 to-accent-50 flex items-center justify-center">
        <div className="text-center">
          <div className="text-6xl mb-4">🎨</div>
          <h2 className="text-2xl font-bold text-gray-800 mb-2">活动未找到</h2>
          <p className="text-gray-600 mb-4">抱歉，您要找的活动不存在</p>
          <button
            onClick={() => navigate('/activities')}
            className="px-6 py-2 bg-primary-500 text-white rounded-full hover:bg-primary-600 transition-colors"
          >
            返回活动列表
          </button>
        </div>
      </div>
    );
  }

  const isFavorite = currentUser?.favorites.includes(activity.id) || false;

  const handleToggleFavorite = () => {
    if (currentUser) {
      toggleFavorite(activity.id);
    } else {
      navigate('/login');
    }
  };

  const handleBooking = () => {
    if (!currentUser) {
      navigate('/login');
      return;
    }
    
    const cartItem: CartItem = {
      id: `cart_${Date.now()}`,
      type: 'activity',
      itemId: activity.id,
      title: activity.title,
      price: activity.price,
      quantity: selectedTickets,
      image: activity.image,
      selectedOptions: {
        date: activity.date,
        time: activity.time
      }
    };
    
    addToCart(cartItem);
    alert(`已将 ${selectedTickets} 张《${activity.title}》活动票加入购物车`);
  };

  const handleContact = () => {
    setShowContactModal(true);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-accent-50">
      {/* Header */}
      <div className="bg-white shadow-sm sticky top-0 z-40">
        <div className="max-w-6xl mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <button
              onClick={() => navigate(-1)}
              className="flex items-center text-gray-600 hover:text-primary-600 transition-colors"
            >
              <ArrowLeft className="w-5 h-5 mr-2" />
              返回
            </button>
            <h1 className="text-lg font-semibold text-gray-800">活动详情</h1>
            <div className="flex items-center space-x-2">
              <button
                onClick={handleToggleFavorite}
                className={`p-2 rounded-full transition-colors ${
                  isFavorite 
                    ? 'text-red-500 bg-red-50 hover:bg-red-100' 
                    : 'text-gray-400 hover:text-red-500 hover:bg-red-50'
                }`}
              >
                <Heart className={`w-5 h-5 ${isFavorite ? 'fill-current' : ''}`} />
              </button>
              <button className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors">
                <Share2 className="w-5 h-5" />
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-4xl mx-auto px-4 py-6">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Main Content */}
          <div className="lg:col-span-2 space-y-6">
            {/* Hero Image */}
            <div className="relative bg-white rounded-2xl shadow-lg overflow-hidden">
              <div className="aspect-[16/9]">
                <img
                  src={activity.image}
                  alt={activity.title}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="absolute top-4 left-4">
                <span className="bg-primary-500 text-white px-3 py-1 rounded-full text-sm font-medium">
                  {activity.category}
                </span>
              </div>
              {activity.spots <= 5 && (
                <div className="absolute top-4 right-4">
                  <span className="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-medium">
                    仅剩 {activity.spots} 位
                  </span>
                </div>
              )}
            </div>

            {/* Activity Info */}
            <div className="bg-white rounded-2xl p-6 shadow-lg">
              <h1 className="text-2xl font-bold text-gray-800 mb-4">{activity.title}</h1>
              <p className="text-gray-600 mb-6">{activity.description}</p>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div className="flex items-center text-sm text-gray-600">
                  <Calendar className="w-4 h-4 mr-2 text-primary-600" />
                  {activity.date}
                </div>
                <div className="flex items-center text-sm text-gray-600">
                  <Clock className="w-4 h-4 mr-2 text-primary-600" />
                  {activity.time}
                </div>
                <div className="flex items-center text-sm text-gray-600">
                  <MapPin className="w-4 h-4 mr-2 text-primary-600" />
                  {activity.location}
                </div>
                <div className="flex items-center text-sm text-gray-600">
                  <Users className="w-4 h-4 mr-2 text-primary-600" />
                  {activity.ageRange} · {activity.spots} 个名额
                </div>
              </div>

              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  <span className="text-3xl font-bold text-primary-600">¥{activity.price}</span>
                  {activity.originalPrice && activity.originalPrice > activity.price && (
                    <span className="text-lg text-gray-400 line-through">¥{activity.originalPrice}</span>
                  )}
                </div>
                
                <div className="flex items-center">
                  {Array.from({ length: 5 }).map((_, i) => (
                    <Star 
                      key={i} 
                      className={`w-4 h-4 ${
                        i < Math.floor(activity.rating || 0) 
                          ? 'text-yellow-400 fill-current' 
                          : 'text-gray-300'
                      }`} 
                    />
                  ))}
                  <span className="ml-2 text-sm text-gray-600">{activity.rating}</span>
                </div>
              </div>
            </div>

            {/* Activity Details */}
            <div className="bg-white rounded-2xl p-6 shadow-lg">
              <h3 className="text-lg font-semibold text-gray-800 mb-4">活动详情</h3>
              <div className="prose prose-gray max-w-none">
                <p className="text-gray-700 leading-relaxed">
                  这是一个专为{activity.ageRange}儿童设计的{activity.category}活动。通过有趣的游戏和互动，
                  孩子们将在轻松愉快的氛围中学习和成长。活动包含丰富的内容和专业的指导，
                  让每个孩子都能获得独特的体验和收获。
                </p>
                
                <h4 className="text-md font-semibold text-gray-800 mt-4 mb-2">活动亮点</h4>
                <ul className="text-gray-700 space-y-1">
                  <li>• 专业导师全程指导</li>
                  <li>• 小班制教学，关注每个孩子</li>
                  <li>• 丰富的互动环节</li>
                  <li>• 安全的活动环境</li>
                  <li>• 家长可陪同参与</li>
                </ul>

                <h4 className="text-md font-semibold text-gray-800 mt-4 mb-2">注意事项</h4>
                <ul className="text-gray-700 space-y-1">
                  <li>• 请提前10分钟到达活动地点</li>
                  <li>• 建议穿着舒适的衣服和鞋子</li>
                  <li>• 请自备水杯和毛巾</li>
                  <li>• 如有特殊情况请提前联系</li>
                </ul>
              </div>
            </div>

            {/* Organizer Info */}
            <div className="bg-white rounded-2xl p-6 shadow-lg">
              <h3 className="text-lg font-semibold text-gray-800 mb-4">组织者信息</h3>
              <div className="flex items-center space-x-4">
                <div className="w-12 h-12 bg-secondary-100 rounded-full flex items-center justify-center">
                  <span className="text-xl">🏢</span>
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-gray-800">绘本岛亲子活动中心</h4>
                  <p className="text-sm text-gray-600">专业的亲子活动策划机构</p>
                  <div className="flex items-center mt-2">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <Star 
                        key={i} 
                        className={`w-4 h-4 ${
                          i < 4 ? 'text-yellow-400 fill-current' : 'text-gray-300'
                        }`} 
                      />
                    ))}
                    <span className="ml-2 text-sm text-gray-600">4.8 (128条评价)</span>
                  </div>
                </div>
                <button
                  onClick={handleContact}
                  className="flex items-center px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors"
                >
                  <MessageCircle className="w-4 h-4 mr-2" />
                  联系
                </button>
              </div>
            </div>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            {/* Booking Card */}
            <div className="bg-white rounded-2xl p-6 shadow-lg sticky top-24">
              <h3 className="text-lg font-semibold text-gray-800 mb-4">立即报名</h3>
              
              <div className="space-y-4 mb-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">报名人数</label>
                  <div className="flex items-center border rounded-lg">
                    <button
                      onClick={() => setSelectedTickets(Math.max(1, selectedTickets - 1))}
                      className="px-3 py-2 hover:bg-gray-100 transition-colors"
                    >
                      -
                    </button>
                    <span className="px-4 py-2 border-x min-w-[60px] text-center">{selectedTickets}</span>
                    <button
                      onClick={() => setSelectedTickets(Math.min(activity.spots, selectedTickets + 1))}
                      className="px-3 py-2 hover:bg-gray-100 transition-colors"
                    >
                      +
                    </button>
                  </div>
                </div>
                
                <div className="flex justify-between items-center">
                  <span className="text-gray-600">单价</span>
                  <span className="font-semibold">¥{activity.price}</span>
                </div>
                
                <div className="border-t pt-4">
                  <div className="flex justify-between items-center">
                    <span className="text-lg font-semibold text-gray-800">总计</span>
                    <span className="text-xl font-bold text-primary-600">¥{activity.price * selectedTickets}</span>
                  </div>
                </div>
              </div>
              
              <div className="space-y-3">
                <button
                  onClick={handleBooking}
                  className="w-full py-3 bg-primary-500 text-white rounded-xl hover:bg-primary-600 transition-colors font-medium"
                >
                  立即报名
                </button>
                
                <button
                  onClick={handleContact}
                  className="w-full py-3 border border-primary-500 text-primary-600 rounded-xl hover:bg-primary-50 transition-colors font-medium"
                >
                  咨询详情
                </button>
              </div>
              
              <div className="mt-4 text-xs text-gray-500 text-center">
                剩余 {activity.spots} 个名额
              </div>
            </div>

            {/* Contact Info */}
            <div className="bg-white rounded-2xl p-6 shadow-lg">
              <h3 className="text-lg font-semibold text-gray-800 mb-4">联系方式</h3>
              <div className="space-y-3">
                <div className="flex items-center text-sm text-gray-600">
                  <Phone className="w-4 h-4 mr-2 text-primary-600" />
                  400-123-4567
                </div>
                <div className="flex items-center text-sm text-gray-600">
                  <MessageCircle className="w-4 h-4 mr-2 text-primary-600" />
                  在线客服
                </div>
                <div className="flex items-center text-sm text-gray-600">
                  <MapPin className="w-4 h-4 mr-2 text-primary-600" />
                  {activity.location}
                </div>
              </div>
            </div>

            {/* Similar Activities */}
            <div className="bg-white rounded-2xl p-6 shadow-lg">
              <h3 className="text-lg font-semibold text-gray-800 mb-4">相似活动</h3>
              <div className="space-y-3">
                {activities
                  .filter(a => a.id !== activity.id && a.category === activity.category)
                  .slice(0, 3)
                  .map(similarActivity => (
                    <div
                      key={similarActivity.id}
                      onClick={() => navigate(`/activities/${similarActivity.id}`)}
                      className="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg cursor-pointer transition-colors"
                    >
                      <img
                        src={similarActivity.image}
                        alt={similarActivity.title}
                        className="w-12 h-12 rounded-lg object-cover"
                      />
                      <div className="flex-1 min-w-0">
                        <h4 className="text-sm font-medium text-gray-800 truncate">{similarActivity.title}</h4>
                        <p className="text-xs text-gray-500">{similarActivity.date}</p>
                        <p className="text-xs text-primary-600 font-medium">¥{similarActivity.price}</p>
                      </div>
                      <ChevronRight className="w-4 h-4 text-gray-400" />
                    </div>
                  ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Contact Modal */}
      {showContactModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl p-6 max-w-sm w-full mx-4">
            <h4 className="text-lg font-semibold text-gray-800 mb-4">联系我们</h4>
            <div className="space-y-3 mb-6">
              <button className="w-full flex items-center justify-center p-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
                <MessageCircle className="w-5 h-5 mr-2" />
                微信咨询
              </button>
              <button className="w-full flex items-center justify-center p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                <Phone className="w-5 h-5 mr-2" />
                电话咨询
              </button>
            </div>
            <button
              onClick={() => setShowContactModal(false)}
              className="w-full p-3 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
            >
              取消
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default ActivityDetailPage;